import { Component } from 'react'
import { View ,Text} from '@tarojs/components'
import './index.scss'
import Taro from '@tarojs/taro'

import { LgSlide } from "../../../../components/slide";
import { LGSlide, SlideMenu } from "../../../../components/LGSlide";
import LgBadge from '../../../../components/badge'
import MyUtils from '../utils';
interface IndexState{

}

export default class PrNoticeItem extends Component <any,IndexState>{
  constructor(props) {
    super(props)
    this.state={
      
    }
    this.onEdit = this.onEdit.bind(this)
    this.onDelete = this.onDelete.bind(this)
    this.onCallback = this.onCallback.bind(this)
    this.toNoticeDetail = this.toNoticeDetail.bind(this)
  }

  componentWillMount() { }

    // UNSAFE_componentWillReceiveProps(nextprops,oldprops){
    //   console.log("",nextprops,oldprops)
    //   let np = JSON.stringify(nextprops)
    //   let op = JSON.stringify(oldprops)
    //   return true
    // }
  shouldComponentUpdate(nextProps){
    // let op = JSON.stringify(this.props.data)
    // let np = JSON.stringify(nextProps.data)
    // if(op == np){
    //   return false
    // }else{
    //   return true
    // }
    let op_data = this.props.data
    let np_data = nextProps.data
    if(MyUtils.isObjEqual(op_data,np_data)){
      return false
    }else{
      return true
    }
    
  }

  componentDidMount() { }

  componentWillUnmount() { }

  onEdit() {
    console.log("你点击了编辑按钮...", );
    this.props.onEdit?this.props.onEdit(this.props.data.noticeId,this.props.data.noticeType,this.props.data.timeType):""
  }
  onDelete() {
    console.log("你点击了删除按钮...", );
    this.props.onDelete?this.props.onDelete(this.props.data.noticeId,this.props.data.noticeType,this.props.data.timeType):""
  }
  onCallback(){
    console.log("你点击了撤回按钮...", )
    this.props.onCallback?this.props.onCallback(this.props.data.noticeId,this.props.data.noticeType):""
  }
  toNoticeDetail(){
    this.props.toNoticeDetail?this.props.toNoticeDetail(this.props.data):''
  }
  //render前处理=================
  getSlideData(status){
    if(process.env.TARO_ENV === "h5"){
      if(status == 1){//进行中
        // return []
        return [{
          content: "撤回",
          onClick: this.onCallback,
          className: "callback",
        }]
      }else if(status == -1){//未发布
        return [{
          content: "编辑",
          onClick: this.onEdit,
          className: "edit",
        },{
          content: "删除",
          onClick: this.onDelete,
          className: "delete",
        }]
      }else if(status == 0){//已结束
        return [{
          content: "删除",
          onClick: this.onDelete,
          className: "delete",
        }]
      }else{
        return []
      }
    }else if(process.env.TARO_ENV === 'weapp'){
      if(status == 1){//进行中
        // return []
        return [{
          content: "",
          text: "撤回",
          onClick: this.onCallback,
          className: "callback",
        }]
      }else if(status == -1){//未发布
        return [{
          content: "",
          text: "编辑",
          onClick: this.onEdit,
          className: "edit",
        },{
          content: "",
          text: "删除",
          onClick: this.onDelete,
          className: "delete",
        }]
      }else if(status == 0){//已结束
        return [{
          content: "",
          text: "删除",
          onClick: this.onDelete,
          className: "delete",
        }]
      }else{
        return []
      }
    }
    

    
  }
  handleTitle(title,searchValue){
    if(!title || title==""){
      return [title,"",""]
    }
    let index1 = title.indexOf(searchValue)
    // console.log("index1",index1)
    if(index1 == -1){
      return [title,"",""]
    }else{
      let t1 = title.substring(0,index1)
      let t2 = title.substring(index1,index1+searchValue.length)
      let t3 = title.substring(index1+searchValue.length)
      // console.log("t123",t1,t2,t3)
      return [t1,t2,t3]
    }
  }
  //=============================
  render() {
    let data = this.props.data
    let time = data.releaseTime?MyUtils.getTimeOfSubmission(data.releaseTime):{day:0,hour:0,minute:0}
    let LgSlideData = this.getSlideData(data.status)
    let searchValue = this.props.searchValue
    let titleArr = this.handleTitle(data.title,searchValue)
    let content = MyUtils.getPlainText(data.content)//富文本中提取文字
    return (
        <View className='PrNoticeItem'>
          {
            process.env.TARO_ENV === 'h5'?
              <LGSlide
                className="box_content"
                slideMenu={LgSlideData}
                canSlide
              >
                <View className="slide-content-box">
                  <View className='content_notice' onClick={this.toNoticeDetail}>
                    <View className='top'>
                      <View className='icon'></View>
                      <View className='text'>
                        {
                          data.noticeType == 1?<Text className='urgent'>[紧急]</Text>
                          :""
                        }
                        <Text className='t1'>{titleArr[0]}</Text>
                        <Text className='t2' style={{color:"rgb(255,102,0)"}}>{titleArr[1]}</Text>
                        <Text className='t3'>{titleArr[2]}</Text>
                      </View>
                      <LgBadge className='badge' type='B' color={data.status==-1?"1":data.status==0?"4":"3"}>
                        {data.status==-1?"未发布":data.status==0?"已结束":"已发布"}
                      </LgBadge>
                    </View>
                    <View className='middle'>
                      <View className='text'>
                        {content}
                      </View>
                    </View>
                    {
                      data.status==-1?"":
                      <View className='bottom'>
                        <View className='text1'>
                          {time.day != 0?time.day+"天前":time.hour != 0?time.hour+"小时前":time.minute > 0?time.minute+"分钟前":"刚刚"}
                          发布
                        </View>
                        {
                          // data.readNum?<View className='text2'>{data.readNum}(已阅)</View>:""
                          data.readNum?<View className='text2'>{data.unReadNum}(未读)</View>:""
                        }
                      </View>
                    }
                  </View>
                </View>
              </LGSlide>
              :
              <LgSlide
                className="box_content"
                data={LgSlideData}
                canSlide
              >
                <View className="slide-content-box">
                  <View className='content_notice' onClick={this.toNoticeDetail}>
                    <View className='top'>
                      <View className='icon'></View>
                      <View className='text'>
                        {
                          data.noticeType == 1?<Text className='urgent'>[紧急]</Text>
                          :""
                        }
                        <Text className='t1'>{titleArr[0]}</Text>
                        <Text className='t2' style={{color:"rgb(255,102,0)"}}>{titleArr[1]}</Text>
                        <Text className='t3'>{titleArr[2]}</Text>
                      </View>
                      <LgBadge className='badge' type='B' color={data.status==-1?"1":data.status==0?"4":"3"}>
                        {data.status==-1?"未发布":data.status==0?"已结束":"已发布"}
                      </LgBadge>
                    </View>
                    <View className='middle'>
                      <View className='text'>
                        {content}
                      </View>
                    </View>
                    {
                      data.status==-1?"":
                      <View className='bottom'>
                        <View className='text1'>
                          {time.day != 0?time.day+"天前":time.hour != 0?time.hour+"小时前":(time.minute>0)?time.minute+"分钟前":"刚刚"}
                          发布
                        </View>
                        {
                          data.timeType == 1?""
                          :
                          // data.readNum?<View className='text2'>{data.readNum}(已阅)</View>:""
                          data.readNum?<View className='text2'>{data.unReadNum}(未读)</View>:""
                        }
                      </View>
                    }
                  </View>
                </View>
              </LgSlide>
          }
        </View>
    )
  }
}
